import {useState , useEffect, useTransition,useRef} from 'react'
import ReactDom from 'react-dom/client'


console.log(import.meta.hot);


function Child() {
  useEffect(()=>{
    console.log("child mount");
    return ()=>{
      console.log("child unMount",document.querySelector("span"))
    }

  },[])
  return (
    <div>
      Child
      <ChildChild/>
    </div>
  )
}
function ChildChild() {
  useEffect(()=>{
    console.log("ChildChild mount");
    console.log(document.querySelector("span"))
  },[])
  return (
    <h1>ChildChild</h1>
  )
}

function Son() {
  useEffect(()=>{
    console.log("Son mount");
  },[])
  return (
    <div>
      Son
    </div>
  )
}

function App() {
  const [isPending, startTransition] = useTransition();
  const [num,setNum] = useState(2)
  const spanRef = useRef(null)

  useEffect(()=>{
    console.log("appMount",spanRef);
  },[])
  const click = ()=>{
    startTransition(()=>{
      setNum(num+1)
    })
  }
  return (
    <div  ref={spanRef}>
      <button  onClick={click}>111</button>
     { num%2 == 0? <Child/>:<Son/>}
     { num%2 == 0? <Child/>:<Son/>}
     { num%2 == 0? <Child/>:<Son/>}
      <Son/>
      {num%2 == 0? <span>111</span>:'222'}
    </div>
  )
}

const root = ReactDom.createRoot(document.getElementById('root')!)

root.render(
    <App />
)

window.root = root